<template>
	<view>
		<view class="top">
			
		</view>
		
		<view class="bottom">
			<view class="store-detail">
				<view class="store-image">
					<image src="/static/storeDetails.png" mode=""></image>
				</view>
				<view class="store-info">
					<view class="store-name">
						大美汽车保养（解放路店）
					</view>
					
					<view class="store-stats">
						<uni-rate class="stars" :readonly="true" :value="4" max="4" size="16"/>
						<text class="score">4分</text>
						<text class="sales">销量：556</text>
					</view>
					
					<view class="store-time">
						营业时间：周一至周日 早上8：00-晚上22：00
					</view>
					
					<view class="store-address">
						<view class="address">
							位置：山阳区人民路与解放路交叉口
						</view>
						<view class="navigate" @click="navigate"><image src="/static/navigate.png" alt="" /></view>
					</view>
				</view>
			</view>
			
			<!-- 服务项目列表 -->
			<view class="service-list">
				<view class="service-title">服务项目</view>
				
				<view class="service-item" @click="toggleService('1')">
					<view class="service-radio">
						<view class="custom-radio" :class="{ 'checked': selectedServices.includes('1') }">
							<view class="radio-inner" v-if="selectedServices.includes('1')"></view>
						</view>
					</view>
					<view class="service-content">
						<view class="service-header">
							<text class="service-name">小保养套餐（合成机油+机滤）</text>
							<view class="service-price">
								<text class="current-price">¥ 35.9</text>
								<text class="original-price">¥60</text>
							</view>
						</view>
						<text class="service-desc">这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍</text>
					</view>
				</view>
				
				<view class="service-item" @click="toggleService('2')">
					<view class="service-radio">
						<view class="custom-radio" :class="{ 'checked': selectedServices.includes('2') }">
							<view class="radio-inner" v-if="selectedServices.includes('2')"></view>
						</view>
					</view>
					<view class="service-content">
						<view class="service-header">
							<text class="service-name">小保养套餐2（合成机油+机滤）</text>
							<view class="service-price">
								<text class="current-price">¥ 35.9</text>
								<text class="original-price">¥60</text>
							</view>
						</view>
						<text class="service-desc">这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍</text>
					</view>
				</view>
				
				<view class="service-item" @click="toggleService('3')">
					<view class="service-radio">
						<view class="custom-radio" :class="{ 'checked': selectedServices.includes('3') }">
							<view class="radio-inner" v-if="selectedServices.includes('3')"></view>
						</view>
					</view>
					<view class="service-content">
						<view class="service-header">
							<text class="service-name">小保养套餐3（合成机油）</text>
							<view class="service-price">
								<text class="current-price">¥ 35.9</text>
								<text class="original-price">¥60</text>
							</view>
						</view>
						<text class="service-desc">这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍</text>
					</view>
				</view>
			</view>

			<view class="service-evaluation">
				<view class="evaluation-title">
					服务评价
				</view>
				
				<view class="info">
					<view class="avatar">
						<image src="/static/头像 (1).png" alt="" />
					</view>
					
					<view class="content">
						<view class="evaluation-top">
							<view class="user">
								黄**
							</view>
							<view class="evaluation-time">
								2022-12-31
							</view>
						</view>
						<view class="evaluation-middle">
							<uni-rate class="stars" :readonly="true" :value="4" max="4" size="16"/>
						</view>
						<view class="evaluation-bottom">
							洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家洗车店洗车！！
						</view>
					</view>
				</view>
				<view class="info">
					<view class="avatar">
						<image src="/static/头像 (1).png" alt="" />
					</view>
					
					<view class="content">
						<view class="evaluation-top">
							<view class="user">
								黄**
							</view>
							<view class="evaluation-time">
								2022-12-31
							</view>
						</view>
						<view class="evaluation-middle">
							<uni-rate class="stars" :readonly="true" :value="4" max="4" size="16"/>
						</view>
						<view class="evaluation-bottom">
							洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家洗车店洗车！！
						</view>
					</view>
				</view>
				
				
				
				<view class="more" @click="querymore">
					<uni-load-more :status="status" :content-text="contentText" />
				</view>

			</view>
			
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
		
		<!-- 底部弹窗 -->
		<view class="cart-popup-overlay" v-if="showCart" @click="hideCartPopup">
			<view class="cart-popup" @click.stop>
				<view class="popup-header">
					<text class="popup-title">已选择服务</text>
					<view class="close-btn" @click="hideCartPopup">×</view>
				</view>
				<view class="popup-content">
					<view v-if="selectedServices.length === 0" class="empty-cart">
						暂无选择的服务
					</view>
					<view v-else>
						<view class="selected-service" v-for="serviceId in selectedServices" :key="serviceId">
							<view class="service-info">
								<text class="service-name">{{ getServiceName(serviceId) }}</text>
								<text class="service-price">¥ 35.9</text>
							</view>
							<view class="remove-btn" @click="removeService(serviceId)">移除</view>
						</view>
					</view>
				</view>
				<view class="popup-footer" v-if="selectedServices.length > 0">
					<view class="total-price">
						总计：¥ {{ (selectedServices.length * 35.9).toFixed(1) }}
					</view>
					<view class="confirm-btn">确认订单</view>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio1: null,
				selectedServices: [], // 默认选中第一个服务，使用数组支持多选
				showCart: false, // 控制购物车弹窗显示
				sex: [{
					text: '小保养套餐（合成机油+机滤）',
					value: 0,
				}],
				options: [{
						icon: 'chat',
						text: '客服'
					}, {
						icon: 'cart',
						text: '购物车',
						info: null
					}],
				contentText:  {contentdown:'查看更多',},
				buttonGroup: [{
				  text: '加入购物车',
				  backgroundColor: '#ff0000',
				  color: '#fff'
				},
				{
				  text: '立即购买',
				  backgroundColor: '#ffa200',
				  color: '#fff'
				}
				],
				currentLocation: {
					latitude: 34.83038,
					longitude: 113.56785
				}, // 默认起点位置
				storeInfo: {
					name: '车百事汽车生活馆',
					address: '山阳区人民路与解放路交叉口',
					phone: '1233211234567',
					targetLocation: {
						latitude: 34.82348,
						longitude: 113.55814
					} // 目标位置
				},
						
			}
		},
		methods: {
			toggleService(value) {
				const index = this.selectedServices.indexOf(value);
				if (index === -1) {
					// 如果未选中，则添加到选中列表
					this.selectedServices.push(value);
					console.log('选中服务:', value);
				}
				// 如果已选中，不做任何操作（不取消选择）
				console.log('当前选中的服务:', this.selectedServices);
			},
			querymore(){
				console.log('查看更多');
			},
			buttonClick(e) {
				console.log(e)
				this.options[1].info=this.selectedServices.length
				uni.navigateTo({
					url: '/index-item/maintenance/confimOrder/confimOrder'
				})
				
				
			},
			// 点击购物车图标时显示弹窗
			onClick(e) {
				if (e.content.text === '购物车') {
					this.showCart = true;
				}
			},
			// 隐藏购物车弹窗
			hideCartPopup() {
				this.showCart = false;
			},
			// 获取服务名称
			getServiceName(serviceId) {
				const serviceNames = {
					'1': '小保养套餐（合成机油+机滤）',
					'2': '小保养套餐2（合成机油+机滤）',
					'3': '小保养套餐3（合成机油）'
				};
				return serviceNames[serviceId] || '未知服务';
			},
			// 从购物车中移除服务
			removeService(serviceId) {
				const index = this.selectedServices.indexOf(serviceId);
				if (index > -1) {
					this.selectedServices.splice(index, 1);
					console.log('从购物车移除服务:', serviceId);
					this.options[1].info=this.selectedServices.length
				}
			},
			navigate(){
				if (!this.currentLocation || !this.storeInfo.targetLocation) {
					uni.showToast({
						title: '位置信息不完整',
						icon: 'none'
					});
					return;
				}
				
				uni.openLocation({
					latitude: this.storeInfo.targetLocation.latitude,
					longitude: this.storeInfo.targetLocation.longitude,
					name: this.storeInfo.name,
					address: this.storeInfo.address
				});
			}
		}
	}
</script>

<style scoped>
	.top{
		height: 25vh;
		background-color: #1f73f1;
	}
	.bottom{
		padding: 20rpx;
		min-height: 75vh;
		background-color: #f8f8f8;
	}
	.store-stats{
		margin-top: 15rpx;
		display: flex;
	}
	.score{
		margin-left: 15rpx;
		margin-top: -5rpx;
		font-size: 16rpx;
	}
	.sales{
		margin-top: -5rpx;
		margin-left: 30rpx;
		font-size: 20rpx;
	}
	.store-detail{
		transform: translateY(-350rpx);
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 25rpx;
	}
	.store-image{
		width: 690rpx;
	}
	.store-image image{
		height: 400rpx;
		border-radius: 25rpx;
	}
	.store-name{
		margin-top: 15rpx;
		font-size: 38rpx;
		font-weight: bold;
	}
	.store-time{
		font-size: 25rpx;
	}
	.store-address{
		display: flex;
	}

	.address{
		font-size: 25rpx;
	}
	.navigate{
		width: 35rpx;
		height: 35rpx;
		margin-left: 20rpx;
		margin-top: 5rpx;
		
	}
	.navigate image{
		width: 35rpx;
		height: 35rpx;
	}
	
	/* 服务项目列表样式 */
	.service-list {
		transform: translateY(-320rpx);
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 25rpx;
		padding: 30rpx;
	}
	
	.service-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		color: #333;
	}
	
	.service-item {
		display: flex;
		align-items: flex-start;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}
	
	.service-item:last-child {
		border-bottom: none;
	}
	
	.service-item:hover {
		background-color: #f9f9f9;
	}
	
	.service-radio {
		margin-right: 20rpx;
		margin-top: 5rpx;
	}
	
	.service-content {
		flex: 1;
	}
	
	.service-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 15rpx;
	}
	
	.service-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		flex: 1;
		margin-right: 20rpx;
	}
	
	.service-price {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	
	.current-price {
		font-size: 36rpx;
		font-weight: bold;
		color: #ff6b35;
	}
	
	.original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
		margin-top: 5rpx;
	}
	
	.service-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}
	
	/* 自定义单选按钮样式 */
	.custom-radio {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ddd;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		transition: all 0.3s ease;
	}
	
	.custom-radio.checked {
		border-color: #1f73f1;
		background-color: #fff;
	}
	
	.radio-inner {
		width: 24rpx;
		height: 24rpx;
		background-color: #1f73f1;
		border-radius: 50%;
	}
	
	.info{
		display: flex;
		height: 250rpx;
		margin-bottom: 60rpx;
	}
	.avatar image{
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
	}
	.avatar{
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
		padding: 25rpx 0;
	}
	.evaluation-top{
		display: flex;
		justify-content: space-between;
	}
	.evaluation-middle{
		margin: 20rpx 0;
	}
	.user{
		font-size: 35rpx;
		color: #191919;
	}
	.evaluation-time{
		color: #adadad;
		font-size: 28rpx;
	}
	.service-evaluation{
		transform: translateY(-320rpx);
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 25rpx;
		padding: 30rpx;
	}
	.evaluation-title{
		font-weight: bold;
		font-size: 36rpx;
	}
	.goods-carts{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
	
	/* 购物车弹窗样式 */
	.cart-popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		z-index: 1000;
	}
	
	.cart-popup {
		width: 100%;
		background-color: #fff;
		border-radius: 25rpx 25rpx 0 0;
		max-height: 80vh;
		animation: slideUp 0.3s ease-out;
	}
	
	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.close-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		color: #999;
		cursor: pointer;
	}
	
	.popup-content {
		padding: 30rpx;
		max-height: 50vh;
		overflow-y: auto;
	}
	
	.empty-cart {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 60rpx 0;
	}
	
	.selected-service {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.selected-service:last-child {
		border-bottom: none;
	}
	
	.service-info {
		flex: 1;
	}
	
	.service-info .service-name {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.service-info .service-price {
		font-size: 32rpx;
		color: #ff6b35;
		font-weight: bold;
	}
	
	.remove-btn {
		padding: 10rpx 20rpx;
		background-color: #f5f5f5;
		color: #666;
		border-radius: 10rpx;
		font-size: 24rpx;
		cursor: pointer;
	}
	
	.remove-btn:hover {
		background-color: #e0e0e0;
	}
	
	.popup-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-top: 1rpx solid #f0f0f0;
		background-color: #fff;
	}
	
	.total-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.confirm-btn {
		padding: 20rpx 40rpx;
		background-color: #1f73f1;
		color: #fff;
		border-radius: 15rpx;
		font-size: 28rpx;
		cursor: pointer;
	}
	
	.confirm-btn:hover {
		background-color: #1a5dc7;
	}
</style>